@use '@angular/material' as mat;

@include mat.core();

$app-primary: mat.define-palette(mat.$deep-purple-palette, 400);
$app-accent: mat.define-palette(mat.$orange-palette, 500);
$app-warn: mat.define-palette(mat.$red-palette);
$app-success: mat.define-palette(mat.$light-green-palette);

$app-theme: mat.define-light-theme((
  color: (
    primary: $app-primary,
    accent: $app-accent,
    warn: $app-warn,
  ),
  typography: mat.define-typography-config(),
  density: -1
));

@include mat.all-component-themes($app-theme);

:root {
  --color-primary: #{mat.get-color-from-palette($app-primary)};
  --color-accent: #{mat.get-color-from-palette($app-accent)};
  --color-warn: #{mat.get-color-from-palette($app-warn)};
  --color-success: #{mat.get-color-from-palette($app-success)};

  --color-app-background: #{mat.get-color-from-palette(mat.define-palette(mat.$blue-palette, 500))};
  --color-app-logo: var(--color-app-background);

  --color-examplex-accent: var(--color-app-background);
  --color-examplex-primary: aliceblue;
  --color-scrollbar-example-x: var(--color-accent);

  --color-example-5: var(--color-app-background);
  --color-example-2: var(--color-app-background);
  --color-virtual-scroll-example: var(--color-app-background);
  --color-nested-virtual-scroll-example: var(--color-app-background);
  --color-infinite-scroll-example: var(--color-app-background);
  --color-infinite-scroll-example-bar-bg: #{mat.get-color-from-palette(mat.define-palette(mat.$blue-palette, 300))};
  --color-infinite-scroll-example-track-bg: #{mat.get-color-from-palette(mat.define-palette(mat.$blue-palette, 100))};

  --color-light-gray: #{mat.get-color-from-palette(mat.define-palette(mat.$grey-palette, 100))};
  --color-dark-gray: #{mat.get-color-from-palette(mat.define-palette(mat.$grey-palette, 600))};
  --color-example3: #{mat.get-color-from-palette(mat.define-palette(mat.$yellow-palette, 700))};
  --color-example4: var(--color-light-gray);
  --color-highlight: aquamarine;
}

.primary-bg {
  background-color: var(--color-app-background);
}

h2 {
  font-weight: 300;
  text-align: center;
  margin: 4em 0;

  &.mat-typography {
    font-size: 1.3em;
  }
}

h1 {
  font-size: 2.5rem;
}

a {
  color: var(--color-accent);
  text-decoration: none;
}

ul {
  position: relative;
  padding: 0;
  margin: 0;
  list-style-type: none;
}

.container {
  max-width: 500px;
  margin: 0 auto;
}

.wide-container {
  max-width: 800px;
  margin: 0 auto;
}

.example-component {
  padding: 2em 0;
  display: block;
  box-sizing: border-box;
}

.mat-mdc-card {
  overflow: hidden;
  --mdc-elevated-card-container-color: var(--color-primary);
  color: white;
  @include mat.elevation(16);

  .mat-mdc-card-title {
    font-weight: 300;
  }

  .mat-mdc-card-content {
    margin-top: 2em;
    padding: 16px;
  }
}

html, body {
  height: 100%;
}

body {
  margin: 0;
  font-family: Roboto, "Helvetica Neue", sans-serif;
}
